<template>
  <div class="table-column">
    <el-table
      ref="orderTable"
      v-loading="tableLoading"
      :data="tableDataFilter"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-col v-bind="grid">
                  <el-form-item label="商品总价：" style="width: 100%;">
                    <span>{{ scope.row.totalPrice | NumFormat }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-bind="grid">
                  <el-form-item label="下单时间：" style="width: 100%;">
                    <span>{{ scope.row.createTime | uctTimeFileter }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-bind="grid">
                  <el-form-item label="用户备注：" style="width: 100%;">
                    <span>{{ scope.row.refund.remark || '' }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-bind="grid">
                  <el-form-item label="商家备注：" style="width: 100%;">
                    <span>{{ scope.row.adminRemark || '无' }}</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column
        type="selection"
        min-width="55"
      />

      <el-table-column
        label="订单号"
        min-width="160"
        align="center"
      >
        <template slot-scope="scope">
          <span style="display: block;">{{ scope.row.orderNo }}</span>
          <span v-show="scope.row.isDel === 1" style="color: rgb(237, 64, 20);display: block;">用户已删除</span>
        </template>
      </el-table-column>

      <el-table-column
        label="订单状态"
        min-width="130"
      >
        <template slot-scope="scope">
          <span>[{{ scope.row.type | payTypeFilter('type') }}]</span>
        </template>
      </el-table-column>

      <el-table-column
        label="用户信息"
        min-width="130"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.user && scope.row.user.nickName || "" }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="商品信息"
        min-width="400"
      >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.productInfo" :key="index" class="tabBox">
            <div>
              <div v-viewer class="tabBox_img">
                <img v-lazy="$uploadURL(item.image)">
              </div>
            </div>
            <div class="tabBox_txt">
              <span class="tabBox_tit">{{ item.title }} | {{ item.suk }}</span>
              <span class="tabBox_pice">￥{{ item.price | NumFormat }} x {{ item.num }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="实际支付"
        min-width="110"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payPrice | NumFormat }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="支付时间"
        min-width="160"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payDateUTC" v-text="scope.row.payDateUTC" />
        </template>
      </el-table-column>

      <el-table-column
        label="支付方式"
        min-width="90"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payType | payTypeFilter('payType') }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="state"
        label="订单类型"
        min-width="140"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.refund.refundState > 0 && scope.row.refund.refundState != 2">
            <b style="color: #ff0000;font-size: 12px;">{{ scope.row.refund.refundState | payTypeFilter('refundState') }}</b><br>
            <span style="font-size: 12px;">退款原因：{{ scope.row.refund.refundWapReason }}</span><br>
            <span style="font-size: 12px;">备注说明：{{ scope.row.refund.refundWapExplain }}</span><br>
            <span style="font-size: 12px;">退款时间：{{ scope.row.refund.refundDateUTC }}</span><br>
            <template>
              <span style="font-size: 12px;">退款凭证：{{ scope.row.refund.refundWapImg.length > 0 ? '' : '无' }}</span><br>
              <div class="voucherImg" v-for="(item, index) in scope.row.refund.refundWapImg" :key="index" v-viewer>
                <img v-lazy="$uploadURL(item)">
              </div>
            </template>
          </div>
          <div v-else>
            <span>{{ scope.row.state | payTypeFilter('state') }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        min-width="200"
        align="center"
        class-name="fixed-column"
      >
        <template slot-scope="{ row }">
          <el-button v-if="row.state === 4 && row.refund.refundType <= 0" type="text" size="small" class="mr10" @click="sendOrder(row)">发送货</el-button>
          <el-button v-if="row.state === 1 && row.refund.refundType === 0 && row.refund.refundState === 0" type="text" size="small" class="mr10" @click="toEdit(row.orderId)">编辑</el-button>
<!--          <el-button v-if="row.state === 5" type="text" size="small" class="mr10" @click="delivery(row)">配送信息</el-button>-->
          <el-dropdown trigger="hover" class="ml10">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="onOrderDetails(row.orderId)">订单详情</el-dropdown-item>
              <el-dropdown-item @click.native="onOrderLog(row.orderId)">订单记录</el-dropdown-item>
              <!--<el-dropdown-item>小票打印</el-dropdown-item>-->
              <!--<el-dropdown-item @click.native="onOrderMark(row)">订单备注</el-dropdown-item>-->
              <el-dropdown-item v-if="[5].includes(row.state) && row.refund.refundType !== 0" @click.native="onReceiving(row.orderId)">已收货</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.currentPage"
      :limit.sync="pagination.limit"
      :page-sizes="[10, 20, 30, 50]"
      @pagination="pageChange"
    />


    <!--配送信息【start】-->
<!--    <distribution-info ref="distribution" :dis-data="distributionData" />-->
    <!--配送信息【end】-->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getReceivingApi } from '@/api/order'
import $moment from 'moment-timezone'

export default {
  name: 'OrderListDetailsTable',
  filters: {
    payTypeFilter(val, key) {
      if (key === 'payType') {
        const data = {
          0: '微信支付',
          1: '支付宝支付'
        }
        return data[val]
      } else if (key === 'state') {
        const data = {
          0: '订单已生成',
          1: '待支付',
          2: '支付失败',
          3: '订单取消',
          4: '待发货',
          5: '待确认收货',
          6: '待评价',
          7: '已退款',
          8: '交易成功',
          21: '待退款'
        }
        return data[val]
      } else if (key === 'type') {
        const data = {
          0: '普通订单',
          1: '秒杀订单',
          2: '砍价订单',
          3: '拼团订单'
        }
        return data[val]
      } else if (key === 'refundState') {
        const data = {
          1: '申请中',
          2: '拒绝退款',
          3: '商品待退货',
          4: '退货待收货',
          5: '已退款'
        }
        return data[val]
      }
    }
  },
  data() {
    return {
      grid: {
        xl: 8,
        lg: 8,
        md: 8,
        sm: 12,
        xs: 24
      },
      orderId: '',
      order: {},
      distributionData: {},
      distribution: false
    }
  },
  computed: {
    ...mapState({
      pagination: state => state.order.pagination,
      tableLoading: state => state.order.tableLoading,
      tableData: state => state.order.tableData
    }),
    // 列表数据整合
    tableDataFilter() {
      return this.tableData.map((item, index) => {
        return {
          // 订单ID
          orderId: item.id,
          // 订单号
          orderNo: item.orderNo,
          // 订单类型
          type: item.type,
          // 实际支付金额
          payPrice: item.payPrice,
          // 支付时间
          payDateUTC: item.payDateUTC && $moment.utc(item.payDateUTC).tz($moment.tz.guess()).format('YYYY-MM-DD HH:mm:ss'),
          // 支付方式
          payType: item.payType,
          // 订单状态
          state: item.state,
          // 创建时间
          createTime: item.createDateUTC,
          // 商品总金额
          totalPrice: item.totalPrice,
          // 商家备注
          adminRemark: item.adminRemark,
          // 删除状态
          isDel: item.isDel,
          // 用户信息
          user: {
            nickName: item.user && item.user.nickName
          },
          // 退款信息
          refund: {
            // 退款状态
            refundState: item.refundState,
            // 退款类型
            refundType: item.refundType,
            // 退款原因
            refundWapReason: item.refundWapReason,
            // 用户备注说明
            refundWapExplain: item.refundWapExplain,
            // 退款时间
            refundDateUTC: item.refundDateUTC && $moment.utc(item.refundDateUTC).tz($moment.tz.guess()).format('YYYY-MM-DD HH:mm:ss'),
            // 用户退款图片
            refundWapImg: item.refundWapImg && item.refundWapImg.split(',') || []
          },
          // 商品信息
          productInfo: item.orderItems && item.orderItems.map(orderItem => {
            return {
              // 商品图片
              image: orderItem.productAttrValue && orderItem.productAttrValue.image,
              // 商品名称
              title: orderItem.productAttrValue && orderItem.productAttrValue.product.title,
              // 商品规格
              suk: orderItem.productAttrValue && orderItem.productAttrValue.suk,
              // 商品价格
              price: orderItem.productAttrValue.price,
              // 商品数量
              num: orderItem.num
            }
          })
        }
      })
    }
  },
  created() {
    this.getOredrList()
  },
  methods: {
    ...mapActions({
      getOrderCount: 'order/getOrderCount',
      setOrderPageTOTAL: 'order/setOrderPageTOTAL',
      setOrderPageCurrentPage: 'order/setOrderPageCurrentPage',
      getOredrList: 'order/getList',
      setOrderTableDataSelection: 'order/setOrderTableDataSelection'
    }),
    /**
     * 待支付状态编辑
     */
    toEdit(orderId) {
      const _this = this

      _this.$modal({
        componentProps: {
          id: orderId
        },
        component: (resolve) => require(['./components/editOrder/index'], resolve),
        props: {
          title: '修改订单',
          customClass: 'zdyDialogCls toDialogCls',
          width: '100%'
        },
        methods: {}
      })
    },
    // 手动选中时
    handleSelectionChange(val) {
      this.setOrderTableDataSelection(val)
    },
    /**
     * 配送信息（无接口暂不完成)
     */
    delivery(row) {
      const _this = this

      _this.$modal({
        componentProps: {
          orderId: row.orderId,
          deliveryType: row.deliveryType,
          orderNo: row.orderNo,
          deliveryName: row.deliveryName,
          deliveryNum: row.deliveryNum
        },
        component: (resolve) => require(['./components/delivery/index'], resolve),
        props: {
          title: '配送信息',
          customClass: 'zdyDialogCls deliveryDialogCls',
          width: '100%'
        },
        methods: {
          getSend() {
            // _this.getOredrList()
          }
        }
      })
    },
    // 发送货
    sendOrder(row) {
      const _this = this

      _this.$modal({
        componentProps: {
          order: row.orderId
        },
        component: (resolve) => require(['./components/orderSend/index'], resolve),
        props: {
          title: '订单发送货',
          customClass: 'zdyDialogCls sendDialogCls',
          width: '100%'
        },
        methods: {
          getSend() {
            _this.getOredrList()
          }
        }
      })
    },
    // 订单详情
    onOrderDetails(id) {
      const _this = this;

      _this.$modal({
        componentProps: {
          orderId: id
        },
        component: (resolve) => require(['./components/orderInfo/index'], resolve),
        props: {
          title: '订单信息',
          customClass: 'zdyDialogCls orderInfoDialogCls',
          width: '100%'
        },
        methods: {}
      });
    },
    // 订单记录
    onOrderLog(orderId) {
      const _this = this

      _this.$modal({
        componentProps: {
          id: orderId
        },
        component: (resolve) => require(['@/components/orderRecord/index'], resolve),
        props: {
          title: '订单记录',
          customClass: 'zdyDialogCls recordDialogCls',
          width: '100%'
        },
        methods: {}
      })
    },
    // 订单备注
    onOrderMark(row) {
      this.$prompt('订单备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '请输入订单备注',
        inputType: 'textarea',
        inputValue: row.remark,
        inputPlaceholder: '请输入订单备注',
        inputValidator: (value) => { if (!value) return '输入不能为空' }
      }).then(({ value }) => {
        /* orderMarkApi({ mark : value, orderNo: row.orderId}).then(() => {
          this.$message.success('操作成功')
          this.getList();
        })*/
      }).catch(() => {
        this.$message.info('取消输入')
      })
    },
    // 已发货
    onReceiving(id) {
      getReceivingApi(id).then(() => {
        this.$message.success('操作成功！')
        this.getOredrList()
      })
    },
    // 分页
    pageChange(data) {
      this.setOrderPageCurrentPage(data.page)
      this.getOredrList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .table-column {
    ::v-deep .el-table .cell {
      line-height: 16px;
    }
    .tabBox {
      display: flex;
      align-items: center;
      .tabBox_img {
        display: block;
        cursor: pointer;
      }
      .tabBox_txt {
        display: flex;
        align-items: center;
        .tabBox_tit {
          margin: 0 2px 0 10px;
          font-size: 12px;
          letter-spacing: 1px;
          padding: 5px 0;
          box-sizing: border-box;
          line-height: 18px;
          display: block;
          width: 70%;
        }
        .tabBox_pice {
          font-size: 12px;
        }
      }
    }
    .fixed-column {
      .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
        font-size: 12px;
      }
    }
    .table-expand {
      label {
        width: 82px;
      }
    }
    .voucherImg {
      width: 25px;
      height: 25px;
      display: inline-block;
      margin-right: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    ::v-deep .el-table__expanded-cell[class*=cell]{
      padding:20px 50px !important;
    }
    .recordBox {
      ::v-deep .pagination-container {
        margin-top: 25px;
        padding: 0 0;
      }
      ::v-deep .el-pagination {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>

<style>
  .el-dialog.sendDialogCls {
    max-width: 1000px;
  }
  .el-dialog.orderInfoDialogCls,
  .el-dialog.deliveryDialogCls {
    max-width: 700px;
  }
  .el-dialog.toDialogCls {
    max-width: 700px;
  }
  .el-dialog.recordDialogCls {
    max-width: 700px;
  }
</style>
